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Today we re going to create a talking 
picture. Its a very simple process and 
once you have it down, you can use it 
to move any body parts! 

First we need to modify an image in 
your preferred image editor. My 
preferred image editor is the Graphic 
Image Manipulation Program or GIMP 
for short. I like GIMP because its free 
and open source, and it has heaps of 
features. Don t worry, what we re 
about to do here in GIMP is a very 
similar process in other programs like 
Photoshop. 

First of all, open up an image by 
clicking none other than the old 
File>open. Then change its size to the 
size of a regular Flash stage (550 pixels 
wide). 
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Alright, now we want to zoom in to our 
image and select the lower jaw area 
with the selection tool. I've used 
GIMP s free hand selection tool 
because I'm not too familiar with the 
others. They look similar to other auto 
selection tools, but seem to work a 
little differently. One of these days I'll 
read up GIMP s help and get it right, 
but today I'm just gunna stick with 
what I know. 

So I've selected the lower jaw region. 
What I'm going to do is cut it out and 
paste it in a new file so that in the end 
I will have 2 images. One of my boss 
Colin, and one of his jaw ready for 
importing into an animation program. 

Lets do it. 



BY: Leigh Blackall 



This work is licensed under the Creative Commons Attribution License. 
To view a copy of this license, visit http : //creativecommons.org/licenses/by/2.5/ 



SOME RIGHTS RESERVED 



Page 2/ 



Screencasting - Talking pictures 



File Xtns Help 



U O 



% ft f P A 

4> " ^ ^ p. 

t J O £ & 

& 6 i ^ 



Free Select 



0 IS 



Mode: |_j [Ijj |HJ [□_ 

0 Antialiasing 

1 I Feather edges 



, •P90725B1.jpg 8.0 (RGB. 1 layer) 501 



■ Create a New Image 



1 - 
7 - 

5/JE 



2 - 
2 - 

5 



2 
5 
0 J 



□ 



0 



Template 
Image Size 



Width: 
Height: 



58 



36 



pixels 



S3 a 



58 i 36 pixels 
72 dpi, RGB color 



72.000 



72.000 



- Advanced Options 

X resolution 
Y resolution 

Colorspace: 

Fill with: 
Comment: 



pixels/in V 



RGB color 



Transparency 



FHih c^ l ^rh \/i^m Tm^np I *y&r Tnnk fairing FilhpKg ^rrinh-Fi I 



■ ' ■ I 3 pp I 3 ^ 



^Help 


^] Reset 


^ Cancel 







px ; t 300% T Background (8.98 MB) 



After selecting the lower jaw and 
cutting it out (Ctrl X or edit>cut) I now 
have the lower jaw sitting on what's 
known as the clipboard. All programs 
have a clipboard. Its a temporary 
storage place for things to cut, copy 
and paste to and from. 

So, Colin s jaw is sitting in my 
clipboard, now I need to create a new 
file to paste it in (Ctrl N or File>New). 
GIMP sees that I have something on 
the clipboard so has automatically 
provided me with the right size for the 
jaw in the new file. All I have to do 
now is make sure that the file will be 
transparent. In the "fill with" field I 
have selected "Transparency". 

All image editors have the transparency 
option when creating a new file. 
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Now I simply paste the jaw from the 
clipboard. Notice the checkered 
background? This indicates that the file 
is transparent. We need the jaw to be 
transparent so it doesn t stand out too 
much in the animation. We want to jaw 
image to look like it is part of the 
original image. This ll make more sense 
later on. 



BY: Leigh Blackall 



This work is licensed under the Creative Commons Attribution License. 
To view a copy of this license, visit http : //creativecommons.org/licenses/by/2.5/ 



SOME RIGHTS RESERVED 



Page 4/ 



Screencasting - Talking pictures 



File Xtns Help 



LJ O 



% T§ f P K 

4> * ® %\ U- 

§ J O £ {? 

& 6 i ^ 



Free Select 



0 ® 



Mode: |_j |£TJ [□_ 

0 Antialiasing 

1 I Feather edges 



□ 



File Edit Select View Image Layer lools Dialogs Filters Script-Fu 



\ U in p 1° I 2 f I 5 ? I 7 ? 



Save Image 



01)® 



Name: 



Save in folder: 



jaw 



png| 



[■-^ colin 



B Browse for other folders 

E Select File lype (By Extension) 



I Help 



^ Cancel 



I Save 



px 



400% t 



Pasted Layer (29.3 KB) 



Cancel 



Happy with the jaw, I better save it. 
Transparent images need to be saved 
in a special format. The most common 
format is the Portable Network 
Graphic, or PNG. For more information 
on the PNG format take a look at 
wikipedias entry: 
http://en.wikipedia.org/wiki/PNG 

In GIMP there are 2 ways to save in a 
particular format. One is to simply type 
the file extension in, for example 
"colin. png". But if you weren't sure of 
the file format s extension then simply 
click the drop down menu "Select File 
Type". 

Notice how many file types are 
supported by GIMP. That's another 
thing I like about GIMP. 

Now that I've saved the transparent 
jaw, I better save Colin s head! 



BY: Leigh Blackall 



This work is licensed under the Creative Commons Attribution License. 
To view a copy of this license, visit http://creativecommons.0rg/licenses/by/2.5/ 



SOME RIGHTS RESERVED 



Page 5/ 



Screencasting - Talking pictures 



e GIMP 



]E3 



File Xtns Help 



o p x ^ 

t % n ^ jp a 

4> ' ^ ^ Si 



f J Q & 



i 6 i «r 



2581.jpg 8.0 (RGB, 1 layer) 501x450 



File Edit Select View Image Layer lools Dialogs Filters Script-Fu 



B i rre i 2 pp Pff.ir^.i.pff i 2 ^ m m 



Bucket Fill 



0 Ut 



Opacity: 
Mode: 



100 



Normal 



Fill Type <Ctrl> 
0 FG color fill 
O EG color fill 
O Pattern fill 



Affected Area <Shift> 
® Fill similar colors 



□ 




0 



239, 238 px ■ t 300% ▼ Background (8.98 MB) 



He's a mean looking dude hey! And I 
work for him! 

When I cut Colins jaw out it left a 
white space. Using the colour fill tool 
(selected) I just clicked in the white 
space to make it black. Making sure I 
had black selected as a colour of 
course. 

Are you seeing where this is going? 
The transparent jaw will sit on top of 
this black space... 
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Now I'm just saving the picture of Colin 
in the Joint Photographic Experts 
Group format, or JPG for normal 
people. The JPG format is the most 
widely used image format, and is 
especially good for compressing 
images for the web. For more 
information of JPG, see the wikipedia 
entry: 

http://en.wikipedia.org/wiki/JPG 

As you already know about GIMP, I can 
save to this format by simply typing in 
the extension, or selecting it from a list 
in the File Type menu. 
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Now we are in Flash, my preferred 
animation program. I prefer Flash 
because I know it. One of these days 
I m going to spend some time with the 
free and open source equivalent called 
Scalable Vector Graphic (SVG)... one of 
these days, unless of course Flash 
becomes free! And open source... 

Anyway! I've clicked the first key frame 
in the time line, then clicked 
file>import>import to stage (Ctrl R). A 
window will appear asking me to select 
the file I am wanting to import. I want 
to import the picture of Colin... 
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There's our man! 

Now I've created a new layer in the 
time line by clicking the little"new 
page" icon with the blue plus symbol 
on it, just below the time line layers. 

Clicking the first frame of that new 
layer (it turns black when selected), I II 
now repeat the import to stage steps 
only this time I'll import the 
transparent jaw. 

As you can probably tell, the jaw will 
be on the top layer and so will sit over 
the image of Colin. Once in, all I need 
to do is position in over the black 
spaces. 
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Just to refresh your memory, here's the 
menu for importing to the stage again. 
See how the jaw has been positioned 
over the black space? I did this with 
the arrow keys, after making sure the 
arrow tool was selected from the tool 
bar (which happens to be under the file 
menu at the moment). 
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Zooming in on the jaw placement, I 
can see that I was close, but not close 
enough in positioning it over the black. 
I'll just continue to use the arrow keys. 

Notice in this screen grab I have the 
zoom tool selected? Its the one next to 
the hand icon. Below it, past the colour 
selectors are the options for this tool - 
zoom or zoom out. 
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Now that the jaw is in the right place, 
hiding the black, I need to create 
frames for the length of the animation. 
I happen to know that the default 
frame rate for Flash is 12 frames per 
second, so if I enter frames in for 20 or 
so, I II end up with a 2 second film. 
Enough to demonstrate at least... 

So I have selected the 20 th frame on 
each frame layer and pressed Fs. Fs is 
short for "insert frames" which can be 
manually found under the "Insert" 
menu. 

This has now created 20 frames for 
both Colin and his jaw to play over. 

Now I need to create key frames on 
the jaws time line so I can move the 
jaw as though talking... 
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So looking carefully at the jaw s time 
line (layer 2) you should be able to see 
black dots in a number of the frames. 
Those black dots are key frames I have 
created. On each key frame I simply 
move the jaw down and up a little. 
When the movie plays, as it passes 
those key frames the jaw will move up 
and down, thus creating the effect of a 
talking Colin. 

To create a key frame, just click every 
second frame or so on the Jaw s time 
line As you click a frame, key F-6. F6 is 
short for "Insert key frame" which can 
be found manually under the "Insert" 
menu. Once a key frame is made you 
can freely move the jaw without 
affecting the position of it in the 
previous key frame Have a play, if you 
make a mistake, just right click the key 
frame that's causing trouble, and select 
"Clear key frame". 
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Once you're happy with the jaw 
movements across the key frames, 
save your work and preview the movie. 
Previewing it will generate a movie file 
next to your Flash editing file wherever 
you saved it. A Flash file ends in .fla 
and a movie file ends in .swf 

Once you have saved your Flash 
editing file, just click the "control" 
menu, then "Test Movie" (Ctrl Enter). 
This will generate your movie file and 
show it to you in a new window within 
Flash. 
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So you should be able to see the 
movement across the key frames you 
created. The movie will loop so even 
though my movie only goes for 20 
frames, or just under 2 seconds, it will 
just keep looping like that until I close 
it. 

The movie. swf is now ready to be 
loaded into a web page and/or played 
in a Flash enabled browser. 
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